<template>
    <hx-navbar ref="hxnb" :config="config" id="nav" @onBack="onBack">
        <block slot="left">
            <text class="left-text">{{ config.leftText }}</text>
        </block>
        <block slot="center">
            <view class="title">
                <text>{{ config.title }}</text>
            </view>
        </block>
        <block slot="right">
            <view
                class="right-btn-item"
                v-for="(item, index) in config.rightBtns"
                :key="index"
                @click="rightClick(item)">
                <text v-if="item.btnType == 1" :style="{'font-size': item.size,'color':item.color,'font-weight':item.bold}">{{ item.type }}</text>
                <uni-icons v-else class="icon" size="44" :type="item.type"></uni-icons>
            </view>
        </block>
    </hx-navbar>
</template>

<script>
export default {
    props: {
        config: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    methods: {
        rightClick(item) {
            this.$emit("rightClick", item)
        },
        onBack() {
            this.$emit("onBack")
        },
    },
}
</script>

<style lang="scss">
.title {
    text {
        font-size: $font-size-32;
    }
}

.right-btn-item {
    padding: 14rpx $app-page-padding;
}

.left-text {
    margin-left: -24rpx;
}
</style>
